/*
    react的路由懒加载配置步骤
    1、首先先导入lazy函数
    import {lazy} from 'react'
    2、调用lazy函数组件功能的加强
    3、在App.jsx中使用Suspense将JSX包裹起来
    const Login=lazy(()=>import('../components/Login'))
    export default function App() {
     return(
    <Suspense fallback={<>正在加载中，请稍等片刻...</>}>
       {useRoutes(routes)}
    </Suspense>
  )
}

*/
import {lazy} from 'react'

import loadable from '../utils/loadable'
const Login=loadable(()=>import('../components/Login'))
const Home=loadable(()=>import('../components/Home'))
const User=loadable(()=>import('../components/home/User'))
const Category=loadable(()=>import('../components/home/Category'))
const Role=loadable(()=>import('../components/home/Role'))
const Product=loadable(()=>import('../components/home/Product'))
const NotFound=loadable(()=>import('../components/NotFound'))
const UserDetail=loadable(()=>import('../components/home/UserDetail'))
const UserInfo=loadable(()=>import('../components/home/UserInfo'))

const routes=[
    {
        path:'/login',
        element:<Login/>
    },
    {
        path:'/home',
        element:<Home/>,
        children:[
            {
                path:'user',
                element:<User/>
            },
            {
                path:'role',
                element:<Role/>
            },
            {
                path:'category',
                element:<Category/>
            },
            {
                path:'product',
                element:<Product/>
            },
            {
                path:'udetail',
                element:<UserDetail/>
            },
            {
                path:'uinfo/:id',
                element:<UserInfo/>
            }
        ]
    },
    {
        path:'*',
        element:<NotFound/>
    }
]
export default routes